<template>
  <a-card title="用户信息列表">
    <a-table
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        bordered
    >
      <template #headerCell="{ column }">
        <span style="font-weight: 600">{{ column.title }}</span>
      </template>

      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'gender'">
          <a-tag :color="record.gender === '男' ? 'blue' : 'pink'">
            {{ record.gender }}
          </a-tag>
        </template>

        <template v-else-if="column.dataIndex === 'email'">
          <a :href="`mailto:${record.email}`">{{ record.email }}</a>
        </template>
      </template>
    </a-table>
  </a-card>
</template>

<script setup>
import { ref } from 'vue';

const columns = ref([
  { title: '姓名', dataIndex: 'name', key: 'name', width: 150 },
  { title: '年龄', dataIndex: 'age', key: 'age', width: 100 },
  { title: '性别', dataIndex: 'gender', key: 'gender', width: 100 },
  { title: '职位', dataIndex: 'position', key: 'position' },
  { title: '邮箱', dataIndex: 'email', key: 'email', width: 200 },
  { title: '入职日期', dataIndex: 'joinDate', key: 'joinDate', width: 150 }
]);

const dataSource = ref([
  { key: 1, name: '李明', age: 28, gender: '男', position: '前端工程师', email: 'li.ming@example.com', joinDate: '2022-03-15' },
  { key: 2, name: '王芳', age: 32, gender: '女', position: '产品经理', email: 'wang.fang@example.com', joinDate: '2020-07-01' },
  { key: 3, name: '张伟', age: 25, gender: '男', position: 'UI设计师', email: 'zhang.wei@example.com', joinDate: '2023-01-10' },
  { key: 4, name: '陈静', age: 29, gender: '女', position: '后端工程师', email: 'chen.jing@example.com', joinDate: '2021-09-22' },
  { key: 5, name: '刘洋', age: 35, gender: '男', position: '技术总监', email: 'liu.yang@example.com', joinDate: '2018-05-06' }
]);

const pagination = ref({
  pageSize: 5,
  showSizeChanger: true,
  pageSizeOptions: ['5', '10', '20'],
  showTotal: total => `共 ${total} 条数据`
});
</script>

<style scoped>
.ant-card {
  margin: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.ant-table) {
  border-radius: 8px;
}
</style>
